<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2023-01-16 18:05:07
 * @LastEditors: chaixinyu
 * @LastEditTime: 2023-01-16 23:30:51
-->
<template>

  <div id="app">

    <div class="voice-input-button-wrapper">

      <div id="voice"></div>

      <ContentInVue3

        appId="6b02441f"

        apiKey="4dd060e44fcce07fc1af673ec4adac27"

        apiSecret="NmI1NWNkNTc5NWM5Njg5YmU0MzMyZjU3"

        color="#fff"

        tipPosition="top"

        interactiveMode="touch"

        :record="showResult"

        :record-start="recordStart"

        :record-stop="recordStop"

        :record-blank="recordNoResult"

        :record-failed="recordFailed"

        :record-ready="recordReady"

        :record-complete="recordComplete"

      >

        <template v-slot:no-speak>没听清您说的什么</template>

      </ContentInVue3>

    </div>

  </div>

</template>

<script setup>
import voiceInputButton from 'voice-input-button2'

import { Vue2InVue3 } from "@efox/emp-vuett";
import { ref } from 'vue';

const emits = defineEmits(['sayTransform'])

const ContentInVue3 = Vue2InVue3(voiceInputButton, "voice");

const recordReady =() => {
  console.info('按钮就绪!')
}

const recordStart =() => {
  console.info('录音开始')
}
const showResult =(text) => {
  console.info('收到识别结果：', text)
}
const recordStop =() => {
  console.info('录音结束')
}

const recordNoResult =() => {
  console.info('没有录到什么，请重试')
}
const recordComplete =(text) => {
  console.info('识别完成! 最终结果：', text)
  emits('sayTransform',text)
}
const recordFailed =(error) => {
  console.info('识别失败，错误栈：', error)
}

</script>

<style scoped>

#app {
position: relative;

width: 80%;

}

.voice-input-button-wrapper{
position: absolute;
top: 55px;
left: 155px;

width: 65px;

height: 65px;

background-color: #0199ff;

border-radius: 50%;

}
.record-btn{
  margin-left: 100px;
}
.result{

width: 100%;

padding: 25px;

border: #e2e2e2 1px solid;

border-radius: 5px;

line-height: 2;

font-size: 16px;

color: #727272;

/* min-height: 24px; */

margin-bottom: 25px;

}
</style>
